import { disSubGoodBtn, getProductPageIndex, handleGoodBtn } from '@/services/center';
import { findByCodeList } from '@/services/login';
import { formatNumber, getOptions, jumpUrl, openUrl, useUrlParams } from '@/utils';
import {
  approvalTypeOptions,
  btnStatusList,
  creditTypeOptions,
  institutionTypeOptions,
} from '@/utils/common';
import { CaretDownFilled, CaretUpOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';

import {
  Button,
  Card,
  Checkbox,
  Col,
  Collapse,
  Divider,
  Flex,
  Radio,
  Row,
  Space,
  Tabs as TabsList,
  Tooltip,
  Typography,
  message,
  theme,
} from 'antd';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Helmet, useIntl, useLocation, useModel } from 'umi';

import banner from '@/assets/baner4.png';
import pan from '@/assets/pan.png';

import goodline from '@/assets/home_recommend.png';
import good from '@/assets/home_recommend.svg';
import nogoodline from '@/assets/home_unrecommend.png';
import nogood from '@/assets/home_unrecommend.svg';
import down from '@/assets/produdct_donw.png';
import AuthButton from '@/components/AuthButton';
import Layout from '@/components/Layouts';
import Loading from '@/components/Loading';
import Tabs from '@/components/Tabs';
import ApplyNowModal from './components/ApplyNowModal';

import TopInfo from '@/components/TopInfo';
import { useGetToken } from '@/utils/request';
import parser from 'react-html-parser';

import CommentCard from './components/CommentCard';
import CommentModal from './components/CommentModal';
const { useToken } = theme;

const Product: React.FC = () => {
  const intl = useIntl();
  const { token } = useToken();
  const { token: tokenVal } = useGetToken();
  const [first, setFirst] = useState(false);
  const { state } = useLocation();

  const [record, setRecord] = useState<Partial<Center.ProductList>>();
  const [visible, setVisible] = useState(false);
  const [commentModalVisible, setCommentModalVisible] = useState(false);
  const { data: optionsList } = useRequest(() => {
    return findByCodeList({
      code: 'banks,orderListStatus',
    });
  });

  const [isFirst, setIsFirst] = useState(true);

  const paramsId = useUrlParams('id');

  const isEn = intl.locale == 'en-US';
  const { banks: banksList, orderListStatus: orderListStatusList } = optionsList?.data || {};
  const initVal = useMemo(() => {
    return {
      loanAmount: 200000,
      loanTerm: '24',
    };
  }, []);
  const value = useMemo(() => ({ ...initVal, ...(state as any) }), [state, initVal]);

  const listEl = useRef<HTMLDivElement>(null);
  const [productList, setProductList] = useState<Center.ProductList[]>([]);
  const { run, data, loading } = useRequest(getProductPageIndex, {
    manual: true,
    onBefore: () => {
      setProductList([]);
    },
  });
  const initKeyList: any = useMemo(() => {
    return {
      // institutionType: 1,
      // tuFlag: 1,
      // appointmentHomeFlag: 1,
      productType: 1,
    };
  }, []);

  useEffect(() => {
    run({ ...initKeyList, ...(value as any) });
  }, [run, value, initKeyList]);

  useEffect(() => {
    if (productList?.length > 0) {
      // 存在id, 说明是页面跳转过来的;
      if (paramsId && !first) {
        productList?.find((item, index) => {
          const id = item.id.toString();
          if (id == paramsId) {
            const el = listEl.current;
            // 滚动到指定id位置
            if (el) {
              document.documentElement.scrollTop = index * 367 + 250;
            }
          }
          return id == paramsId;
        }) as any;
        setFirst(true);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [productList, paramsId]);
  const { user } = useModel('userModel');
  const { xScoreAmount } = user || {};
  const [keyList, setKeyList] = useState<Center.ProductPrams>(initKeyList);
  const [params, setParams] = useState<Record<string, any>>({});
  // 顶部tab栏的值

  const [topVal, setTopVal] = useState({ ...value });
  const onChangeKey = (key: keyof Center.ProductPrams, value: any) => {
    const list = { ...keyList, [key]: value };
    setKeyList(list);
    const { rebateParams = [], banks = [], appointmentHomeFlag, ...rest } = list;
    run({
      ...rest,
      ...topVal,
      ...(banks?.length > 0 ? { banks } : {}),
      ...(appointmentHomeFlag?.length > 0
        ? { appointmentHomeFlag: appointmentHomeFlag.toString() }
        : {}),
      ...(rebateParams?.length > 0 ? { rebateParams: '1' } : {}),
    });
    setParams({});
    document.documentElement.scrollTop = 0;
  };
  const { institutionType, tuFlag, appointmentHomeFlag, rebateParams, banks } = keyList;
  // 左边内容
  const priceList = [{ label: '', value: '1' }];
  const leftContent = [
    {
      title: 'home.institution_type',
      component: (
        <Radio.Group
          value={institutionType}
          onChange={(val) => {
            onChangeKey('institutionType', val.target.value);
          }}
          options={institutionTypeOptions}
        />
      ),
    },
    {
      title: 'home.credit_type',
      component: (
        <Radio.Group
          value={tuFlag}
          onChange={(val) => {
            onChangeKey('tuFlag', val.target.value);
          }}
          options={creditTypeOptions}
        />
      ),
    },
    {
      title: 'home.approval_time',
      component: (
        <Checkbox.Group
          value={appointmentHomeFlag as any}
          onChange={(val) => {
            onChangeKey('appointmentHomeFlag', val);
          }}
          options={approvalTypeOptions}
        />
      ),
    },
    {
      title: 'home.cash',
      type: 'switch',
      component: (
        <Checkbox.Group
          value={rebateParams as any}
          onChange={(val) => {
            onChangeKey('rebateParams', val);
          }}
          options={priceList}
        />
      ),
    },
    {
      title: 'home.bank_or_institution',
      component: (
        <Checkbox.Group
          value={banks as any}
          onChange={(val) => {
            onChangeKey('banks', val);
          }}
          options={getOptions(banksList)}
        />
      ),
    },
  ];
  const tipsList = [
    {
      color: '#0065FD',
      bgColor: '#E4EFFF',
      label: 'home.x_special',
      key: 'platformRebate',
    },
    {
      color: '#FF8F00',
      bgColor: '#FFEFE8',
      label: '',
      key: 'rebate',
    },
  ];

  useEffect(() => {
    if (data?.data) {
      setProductList(data.data);
    }
  }, [data]);
  // 产品列表

  const sortList = [
    {
      type: 'loanAmountMax',
      label: 'home.due_amount',
    },
    {
      type: 'yearInterestMin',
      label: 'home.due_rate',
    },
  ];
  // 过滤
  const newList = useMemo(() => {
    return Object.values(params).length > 0
      ? productList.sort((a: any, b: any): any => {
          const key: any = Object.keys(params)[0];
          const value = params[key];
          if (value === 'up') {
            return a[key] - b[key];
          } else {
            return b[key] - a[key];
          }
        })
      : productList;
  }, [productList, params]);
  // 排序
  const handleSortVal = (val: string) => {
    if (val == 'up') {
      return 'down';
    } else if (val == 'down') {
      return '';
    } else {
      return 'up';
    }
  };
  const descripList = [
    {
      key: 'averageMonthAmount',
      title: 'home.month_pay',
      formatFn: (value: number) => (
        <Space size={0} style={{ lineHeight: '26px' }}>
          <div style={{ fontSize: 18 }}>$</div>
          <div style={{ fontSize: 22 }}>{formatNumber(value, false)}</div>
        </Space>
      ),
    },
    {
      key: 'loanAmountMax',
      title: 'home.max_loan_amount',
      formatFn: (value: number) => (
        <Space size={0} style={{ fontSize: 18, color: '#0070DF', fontWeight: 700 }}>
          <div>$</div>
          <div>{formatNumber(value, false)}</div>
        </Space>
      ),
    },
    {
      key: 'loanTermMax',
      title: 'home.long_pay',
      formatFn: (value: number) => (
        <div style={{ fontSize: 14, fontWeight: 400 }}>
          {intl.formatMessage(
            { id: 'home.month' },
            { num: <span style={{ fontWeight: 700, fontSize: 18 }}>{value}</span> },
          )}
        </div>
      ),
    },
    {
      key: 'yearInterestMin',
      title: 'home.low_year_rate',
      formatFn: (value: number) => `${value}%`,
    },
  ];
  // const renderItem = (value: any[]) => {
  //   return (
  //     <Row className="product_content_right_card_list" gutter={[0, 11]}>
  //       {(value || [])?.map((item) => {
  //         const val = Object.prototype.toString.call(item) == '[object Object]' ? '' : item;
  //         return item ? (
  //           <Col className="product_content_right_card_list_item" key={item?.id || val} span={24}>
  //             <Flex align="flex-start" style={{ display: 'flex' }}>
  //               <Col className="product_content_right_card_list_item_point" />
  //               <Col style={{ flex: 1 }}>{item.profileName || val}</Col>
  //             </Flex>
  //           </Col>
  //         ) : null;
  //       })}
  //     </Row>
  //   );
  // };

  const handleItemcomand = async (obj: { id: number; value: number; type: 'good' | 'nogood' }) => {
    let newVal: any;
    let msg: any;
    if (!tokenVal) {
      jumpUrl('/login');
      return false;
    }
    const { id, value, type } = obj;
    try {
      if (value === 0) {
        if (type == 'nogood') {
          await disSubGoodBtn({ productId: id });
          newVal = '';
          msg = 'home.cancel_unrecommend_suc';
        } else {
          await handleGoodBtn({ productId: id, likeFlag: 1 });
          newVal = 1;
          msg = 'home.recommend_suc';
        }
      } else if (value === 1) {
        if (type == 'good') {
          await disSubGoodBtn({ productId: id });
          newVal = '';
          msg = 'home.cancel_recommend_suc';
        } else {
          await handleGoodBtn({ productId: id, likeFlag: 0 });
          newVal = 0;
          msg = 'home.unrecommend_suc';
        }
      } else {
        const val = type == 'good' ? 1 : 0;
        await handleGoodBtn({ productId: id, likeFlag: val });
        newVal = val;
        msg = val == 1 ? 'home.recommend_suc' : 'home.unrecommend_suc';
      }

      let newList = [...productList];

      newList = newList.map((item: any) => {
        const { id: vId } = item;

        if (vId == id) {
          return {
            ...item,
            likeFlag: newVal,
          };
        }
        return item;
      });

      message.success(intl.formatMessage({ id: msg }));
      return newList;
    } catch {
      return productList;
    }
  };
  const year = new Date().getFullYear();
  const ref = useRef<any>();
  const [clickReset, setClickReset] = useState(false);
  return (
    <>
      <Helmet>
        <title>
          {intl.formatMessage(
            {
              id: `home.product_meta_title${
                topVal?.productType ? Number(topVal?.productType) - 1 : 0
              }`,
            },
            { year },
          )}
        </title>
        <meta
          name="description"
          content={intl.formatMessage({ id: 'home.product_meta_descrtion' })}
        />
      </Helmet>

      <div className="product" style={{ minHeight: '100vh' }}>
        <Layout bgImg={banner} fixed>
          <div style={{ padding: '28px 0 62px 0' }}>
            <TopInfo xScoreAmount={xScoreAmount} />
          </div>
        </Layout>
        <div>
          <div
            className="common top_tabs"
            style={{ marginTop: -39, position: 'relative', zIndex: 3 }}
          >
            <Tabs
              className="product_tabs"
              value={value}
              onTabChange={(value) => {
                run({ ...initKeyList, ...value });
                setKeyList(initKeyList);
                setTopVal(value);
                setParams({});
              }}
              topTitle={{
                needNumber: true,
                num: <span style={{ color: '#FF8F00' }}>{productList.length}</span>,
                number: productList.length,
              }}
              onFinish={(value) => {
                run({ ...keyList, ...value });
                // setKeyList(initKeyList);
                setTopVal(value);
                // setParams({});
              }}
              onValuesChange={(value: any) => {
                setTopVal({ ...topVal, ...value });
              }}
            />
          </div>
          <Flex className="product_content common" gap={24}>
            <div className="product_content_left">
              <Flex justify="space-between" className="product_content_left_top">
                <div style={{ color: '#333', cursor: 'pointer' }}>
                  {intl.formatMessage({ id: 'home.choose' })}
                </div>
                <div
                  className="reset"
                  ref={ref}
                  onClick={() => {
                    setKeyList(initKeyList);
                    setClickReset(true);
                    setTimeout(() => {
                      setClickReset(false);
                    }, 500);
                    run({ ...initKeyList, ...topVal });
                  }}
                  style={{ color: token.colorPrimary, cursor: 'pointer' }}
                >
                  {intl.formatMessage({ id: 'home.reset' })}
                  {clickReset ? <div className="reset_point" /> : null}
                </div>
              </Flex>
              {leftContent.map((item) => {
                const { title, component, type } = item;
                return (
                  <div key={title}>
                    <Divider />
                    {type == 'switch' ? (
                      <Flex align="center" justify="space-between">
                        <div style={{ color: '#333', fontSize: 18 }}>
                          {intl.formatMessage({ id: title })}
                        </div>
                        <div> {component}</div>
                      </Flex>
                    ) : (
                      <>
                        <div style={{ color: '#333', fontSize: 18 }}>
                          {intl.formatMessage({ id: title })}
                        </div>
                        <div style={{ paddingTop: 22 }}> {component}</div>
                      </>
                    )}
                  </div>
                );
              })}
            </div>
            <div style={{ width: '870px' }}>
              <Flex align="center" style={{ marginBottom: 15, justifyContent: 'space-between' }}>
                <Space align="center" style={{ fontWeight: 600 }}>
                  <Space>
                    {loading ? (
                      <>
                        <Loading
                          style={{ width: 21, borderWidth: 2.1, height: 21 }}
                          wapperStyle={{ position: 'static', transform: 'none' }}
                        />
                        <div style={{ fontSize: 16, color: '#212121' }}>
                          {intl.formatMessage({ id: 'home.search_word' })}
                        </div>
                      </>
                    ) : null}
                  </Space>
                </Space>
                <Flex align="center" justify="flex-end">
                  <Space size={16}>
                    {sortList.map((item) => {
                      const { label, type } = item;
                      return (
                        <Space
                          key={label}
                          align="center"
                          style={{ cursor: 'pointer' }}
                          onClick={() => {
                            const val = handleSortVal(params[type]);
                            setParams(
                              val
                                ? {
                                    [type]: val,
                                  }
                                : {},
                            );
                          }}
                        >
                          <Col style={{ fontSize: 16 }}>{intl.formatMessage({ id: label })}</Col>
                          <Col style={{ fontSize: 10 }}>
                            <div style={{ height: 10 }}>
                              <CaretUpOutlined
                                style={{
                                  color: params[type] === 'up' ? '#0065FD' : '#999999',
                                }}
                              />
                            </div>
                            <div>
                              <CaretDownFilled
                                style={{
                                  color: params[type] === 'down' ? '#0065FD' : '#999999',
                                }}
                              />
                            </div>
                          </Col>
                        </Space>
                      );
                    })}
                  </Space>
                </Flex>
              </Flex>
              <Card loading={loading} ref={listEl} className="product_content_right">
                <div className="product_content_right_content">
                  {newList.length > 0 ? (
                    newList.map((item) => {
                      const {
                        id,
                        merchantLogo,
                        productName,
                        applyNum,
                        passRate,
                        productIntroduction,
                        productScore,
                        productKey,
                        productOtherFeature,
                        productApplyInfo,
                        orderUserStatus,
                        merchantName,
                        merchantId,
                        merchantIntroduction,
                        likeFlag,
                        likeRate,
                        unlikeRate,
                        reviewCount,
                        productType,
                        reviews = [],
                      } = item;
                      const name = orderListStatusList?.find(
                        (item) => item.value == orderUserStatus,
                      )?.name;
                      const { color, background } = btnStatusList(orderUserStatus) || {};

                      const tabItem = [
                        {
                          label: intl.formatMessage({ id: 'home.product_features' }),
                          key: 'productFeature',
                          children: (
                            <div className="product_content_right_card_list">
                              {parser(productOtherFeature)}
                            </div>
                          ),
                        },
                        {
                          label: intl.formatMessage({ id: 'home.apply_data' }),
                          key: 'data',
                          children: (
                            <div className="product_content_right_card_list">
                              {parser(productApplyInfo)}
                            </div>
                          ),
                        },
                        // {
                        //   label: intl.formatMessage({ id: 'home.apply_qualification' }),
                        //   key: 'qualification',
                        //   children: renderItem(productApplyQualifications?.split('\n')),
                        // },
                        {
                          label: (
                            <div>
                              {intl.formatMessage({ id: 'home.comment_word' })}({reviewCount})
                            </div>
                          ),
                          key: 'comment',
                          children: (
                            <div style={{ marginTop: 14 }}>
                              <Flex
                                justify="space-between"
                                style={{ marginBottom: 23, marginLeft: isEn ? 113 : 73 }}
                              >
                                <Button
                                  onClick={() => {
                                    if (!tokenVal) {
                                      jumpUrl('/login');
                                      return false;
                                    }
                                    setCommentModalVisible(true);
                                    setRecord(item);
                                  }}
                                  type="primary"
                                  style={{ minWidth: 120, height: 38 }}
                                >
                                  {intl.formatMessage({ id: 'home.submit_comment_word' })}
                                </Button>
                                <Flex
                                  style={{
                                    color: '#666',
                                    fontWeight: 700,
                                    cursor: 'pointer',
                                    alignItems: 'flex-end',
                                  }}
                                  onClick={() => {
                                    if (!tokenVal) {
                                      jumpUrl('/login');
                                      return false;
                                    }
                                    const params = encodeURIComponent(
                                      `id=${id}&productName=${productName}&name=${merchantName}&logo=${merchantLogo}&introduction=${merchantIntroduction}&score=${productScore}&productType=${productType}`,
                                    );
                                    openUrl(`/comment?${params}`);
                                  }}
                                >
                                  {intl.formatMessage({ id: 'home.check_more' })}&gt;&gt;
                                </Flex>
                              </Flex>
                              <CommentCard
                                onDelete={(reviewId) => {
                                  const newList = productList.map((item) => {
                                    if (item.id == id) {
                                      return {
                                        ...item,
                                        reviewCount: item.reviewCount - 1,
                                        reviews: item.reviews.filter(
                                          (item: any) => item.id !== reviewId,
                                        ),
                                      };
                                    }
                                    return item;
                                  });
                                  setProductList(newList);
                                }}
                                data={reviews.slice(0, 3)}
                              />
                            </div>
                          ),
                        },
                      ];
                      const newTipsList = tipsList.filter((v) => {
                        const { key } = v;
                        return item[key] && item[key] != '<p></p>';
                      });
                      return (
                        <Card key={id} className="product_content_right_card">
                          <Flex gap={20} justify="space-between" align="center">
                            <Flex gap={9} flex={1} style={{ overflow: 'hidden' }}>
                              <img
                                style={{ cursor: 'pointer' }}
                                onClick={() => {
                                  const params = encodeURIComponent(
                                    `id=${merchantId}&productName=${productName}&name=${merchantName}&logo=${merchantLogo}&introduction=${merchantIntroduction}`,
                                  );
                                  openUrl(`/MerchantDetail?${params}`);
                                }}
                                src={merchantLogo}
                                height={30}
                                className="img_animation"
                              />
                              <Typography.Text
                                style={{ fontSize: 20, color: '#0F294D', fontWeight: 700 }}
                                ellipsis={{
                                  tooltip: (
                                    <div>
                                      {merchantName}「{productName}」
                                    </div>
                                  ),
                                }}
                              >
                                {merchantName}「{productName}」
                              </Typography.Text>
                            </Flex>
                            <Space size={9}>
                              <div
                                style={{
                                  background: '#FFEFE8',
                                  color: '#FF8F00',
                                  whiteSpace: 'nowrap',
                                }}
                                className="product_content_right_card_tag"
                              >
                                {intl.formatMessage({ id: 'home.send' }, { num: applyNum })}
                              </div>
                              <div
                                style={{
                                  background: '#E8F7FF',
                                  color: '#0065FD',
                                  whiteSpace: 'nowrap',
                                }}
                                className="product_content_right_card_tag"
                              >
                                <span style={{ fontWeight: 700 }}>
                                  {intl.formatMessage({ id: 'home.success_rate' })}
                                </span>
                                <span style={{ marginLeft: 5 }}>{passRate}%</span>
                              </div>
                            </Space>
                          </Flex>
                          <Space size={9}>
                            {productKey.split('\n').map((item: string) => {
                              return (
                                <div
                                  key={item}
                                  style={{
                                    background: '#F5F5F5',
                                    color: '#666666',
                                    margin: '10px 0',
                                  }}
                                  className="product_content_right_card_tag"
                                >
                                  {item}
                                </div>
                              );
                            })}
                          </Space>
                          <div
                            style={{
                              padding: '10px',
                              background: 'rgba(221, 226, 238, 0.3)',
                              borderRadius: 6,
                            }}
                          >
                            <Flex gap={12} align="center">
                              <Space size={12} align="center">
                                <Space>
                                  <div className="product_content_right_card_score">
                                    <span>{productScore}/</span>
                                    <span style={{ opacity: 0.6 }}>
                                      {intl.formatMessage({ id: 'center.five' })}
                                    </span>
                                  </div>
                                </Space>
                                <Divider type="vertical" />
                              </Space>

                              <Tooltip title={productIntroduction}>
                                <div
                                  style={{
                                    color: '#666666',
                                    fontWeight: 700,
                                    width: 700,
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                  }}
                                >
                                  {productIntroduction}
                                </div>
                              </Tooltip>
                            </Flex>
                          </div>
                          <Flex
                            justify="space-between"
                            align="center"
                            style={{ margin: '21px 0 18px 0' }}
                            gap={25}
                          >
                            {descripList.map((v, index) => {
                              const { key, title, formatFn } = v;
                              const isFirst = index == 0;
                              return (
                                <div
                                  className={
                                    isFirst
                                      ? 'product_content_right_card_light'
                                      : 'product_content_right_card_common'
                                  }
                                  key={key}
                                  style={{
                                    ...(isFirst && isEn ? { padding: '12px 27px 18px' } : {}),
                                  }}
                                >
                                  <div>{formatFn(item[key])}</div>
                                  <div
                                    style={{
                                      fontSize: 12,
                                      color: '#999',
                                      lineHeight: '20px',
                                      letterSpacing: '.03em',
                                    }}
                                  >
                                    {intl.formatMessage({ id: title })}
                                  </div>
                                </div>
                              );
                            })}

                            {orderUserStatus ? (
                              <AuthButton
                                type="text"
                                className="product_content_right_card_btn"
                                style={{ backgroundColor: background, cursor: 'auto' }}
                              >
                                <Typography.Text
                                  style={{ color, fontSize: 16 }}
                                  ellipsis={{ tooltip: name }}
                                >
                                  {name}
                                </Typography.Text>
                              </AuthButton>
                            ) : (
                              <AuthButton
                                type="primary"
                                onClick={() => {
                                  setVisible(true);
                                  setRecord(item);
                                }}
                                className="product_content_right_card_btn product_content_right_card_now"
                              >
                                <Space size={0}>
                                  <Flex style={{ marginBottom: isEn ? 4 : 0 }} align="center">
                                    {intl.formatMessage({ id: 'home.apply_now' })}
                                  </Flex>
                                  <div className="product_content_right_card_now_bg" />
                                </Space>
                              </AuthButton>
                            )}
                          </Flex>
                          <div
                            style={{ position: 'relative' }}
                            className="product_content_right_card_main"
                          >
                            <Collapse
                              collapsible="icon"
                              expandIconPosition="right"
                              expandIcon={({ isActive }) => {
                                const bottom = isActive ? -40 : 0;

                                return (
                                  <>
                                    {!isActive ? (
                                      <div
                                        onClick={(e) => {
                                          e.stopPropagation();
                                        }}
                                      >
                                        <Divider
                                          style={{
                                            position: 'absolute',
                                            left: 0,
                                            top: -24,
                                            cursor: 'auto',
                                          }}
                                        />
                                      </div>
                                    ) : null}
                                    <Flex
                                      style={{
                                        marginTop: !isActive ? 43 : 0,
                                      }}
                                      justify="space-between"
                                      align="center"
                                    >
                                      <Flex
                                        style={{
                                          position: 'absolute',
                                          left: 0,
                                          bottom,
                                          zIndex: 5,
                                        }}
                                        onClick={(e) => {
                                          e.stopPropagation();
                                        }}
                                      >
                                        <Flex
                                          gap={2}
                                          style={{ color: '#666', cursor: 'auto' }}
                                          align="center"
                                        >
                                          <Flex
                                            align="center"
                                            className={likeFlag === 1 && !isFirst ? 'good' : ''}
                                          >
                                            <img
                                              width={18}
                                              height={18}
                                              src={likeFlag === 1 ? good : goodline}
                                            />
                                            {likeFlag === 1 && !isFirst ? (
                                              <div className="good_point" />
                                            ) : null}
                                          </Flex>
                                          <div>
                                            <span style={{ fontWeight: 700, fontSize: 16 }}>
                                              {likeRate * 100}%
                                            </span>
                                            <span
                                              className="text_blue"
                                              onClick={async () => {
                                                setProductList(
                                                  (await handleItemcomand({
                                                    id,
                                                    value: likeFlag,
                                                    type: 'good',
                                                  })) as any,
                                                );
                                                setIsFirst(false);
                                              }}
                                              style={{
                                                cursor: 'pointer',
                                                color: likeFlag === 1 ? '#0070df' : '#666',
                                                transition: 'color .5s',
                                                marginLeft: 2,
                                              }}
                                            >
                                              {intl.formatMessage({ id: 'home.recommend' })}
                                            </span>
                                          </div>
                                        </Flex>
                                        <Flex
                                          gap={2}
                                          style={{
                                            color: '#666',
                                            marginLeft: 5,
                                            cursor: 'auto',
                                          }}
                                          align="center"
                                        >
                                          <img
                                            style={{ color: '#fff' }}
                                            width={18}
                                            height={18}
                                            src={likeFlag === 0 ? nogood : nogoodline}
                                          />
                                          <div>
                                            <span style={{ fontWeight: 700, fontSize: 16 }}>
                                              {unlikeRate * 100}%
                                            </span>
                                            <span
                                              className="text_blue"
                                              onClick={async () => {
                                                setProductList(
                                                  (await handleItemcomand({
                                                    id,
                                                    value: likeFlag,
                                                    type: 'nogood',
                                                  })) as any,
                                                );
                                              }}
                                              style={{
                                                cursor: 'pointer',
                                                color: likeFlag === 0 ? '#0070df' : '#666',
                                                marginLeft: 2,
                                                transition: 'color .5s',
                                              }}
                                            >
                                              {intl.formatMessage({ id: 'home.unrecommend' })}
                                            </span>
                                          </div>
                                        </Flex>
                                      </Flex>
                                      <Flex
                                        style={{
                                          position: 'absolute',
                                          right: 0,
                                          bottom,
                                          zIndex: 5,
                                        }}
                                        justify="center"
                                        align="center"
                                      >
                                        <Space style={{ color: '#666' }} className="text_blue">
                                          <div>
                                            {intl.formatMessage({
                                              id: isActive ? 'home.hide_info' : 'home.product_info',
                                            })}
                                          </div>
                                          <Flex className="product_content_right_card_circle ">
                                            <svg
                                              className={`product_content_right_card_icon ${
                                                isActive ? '' : 'rote'
                                              }`}
                                              width="10"
                                              height="6"
                                              viewBox="0 0 10 6"
                                              fill="currentColor"
                                              xmlns="http://www.w3.org/2000/svg"
                                            >
                                              <path
                                                d="M5 2.18557e-07L3.97059 1.02439L-2.17491e-07 4.97561L1.02941 6L5 2.04878L8.97059 6L10 4.97561L6.02941 1.02439L5 2.18557e-07Z"
                                                fill="currentColor"
                                              />
                                            </svg>
                                          </Flex>
                                        </Space>
                                      </Flex>
                                    </Flex>
                                  </>
                                );
                              }}
                              ghost
                            >
                              <Collapse.Panel key={1} header={<div style={{ minHeight: 28 }} />}>
                                {newTipsList.length > 0 ? (
                                  <div>
                                    {/* 平台返利和机构活动 */}
                                    <Row gutter={[0, 20]}>
                                      {newTipsList.map((v, index) => {
                                        const { color, bgColor, key, label } = v;
                                        return (
                                          <Col
                                            className="product_content_right_card_tip"
                                            style={{
                                              backgroundColor: bgColor,
                                              borderLeft: `3px solid ${color}`,
                                              paddingLeft: 0,
                                            }}
                                            key={label}
                                          >
                                            <Col className="product_content_right_card_tip_content">
                                              <Flex
                                                align="center"
                                                style={{
                                                  padding: '5px  66px 5px 24px',
                                                  marginBottom: 9,
                                                  fontSize: 16,
                                                  fontWeight: 700,
                                                  display: 'inline-flex',
                                                  color,
                                                  background:
                                                    'linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.05) 100%)',
                                                }}
                                                gap={6}
                                              >
                                                <img
                                                  src={require(`@/assets/${
                                                    index == 0 ? 'b' : 'o'
                                                  }_gift.png`)}
                                                  width={18}
                                                  height={18}
                                                />
                                                <div>
                                                  {label ? (
                                                    intl.formatMessage({ id: label })
                                                  ) : (
                                                    <>
                                                      {merchantName}
                                                      {intl.formatMessage({
                                                        id: 'home.promotional_activity',
                                                      })}
                                                    </>
                                                  )}
                                                </div>
                                              </Flex>

                                              <div style={{ paddingLeft: 20 }}>
                                                <Typography.Paragraph
                                                  style={{ marginBottom: 0 }}
                                                  ellipsis={{
                                                    rows: 4,
                                                    expandable: 'collapsible',
                                                    symbol(expanded) {
                                                      return (
                                                        <img
                                                          src={down}
                                                          width={10}
                                                          height={10}
                                                          className={`product_content_right_card_icon ${
                                                            expanded ? 'rote' : ''
                                                          }`}
                                                        />
                                                      );
                                                    },
                                                  }}
                                                >
                                                  {parser(item[key])}
                                                </Typography.Paragraph>
                                              </div>
                                            </Col>
                                          </Col>
                                        );
                                      })}
                                    </Row>
                                  </div>
                                ) : null}
                                {/* 产品特色 */}
                                <TabsList
                                  style={{
                                    margin: newTipsList.length > 0 ? '24px 0 34px' : '0 0 34px',
                                  }}
                                  items={tabItem}
                                  className="product_content_right_card_tabs"
                                />
                              </Collapse.Panel>
                            </Collapse>
                          </div>
                        </Card>
                      );
                    })
                  ) : (
                    <div style={{ textAlign: 'center', marginTop: 80 }}>
                      <img src={pan} width={100} />
                      <div style={{ margin: '16px 0 6px 0', fontSize: 20, color: '#666' }}>
                        {intl.formatMessage({ id: 'home.empty_way' })}
                      </div>
                      <div style={{ fontSize: 12, color: '#999' }}>
                        {intl.formatMessage({ id: 'home.wait' })}
                      </div>
                    </div>
                  )}
                </div>
              </Card>
            </div>
          </Flex>
        </div>
        <ApplyNowModal
          visible={visible}
          data={record || {}}
          handleCancel={() => {
            setVisible(false);
            setRecord({});
          }}
          onOk={(productId) => {
            const list = productList.map((item) => {
              const { id } = item;

              if (productId == id) {
                return {
                  ...item,
                  orderUserStatus: '1',
                };
              }
              return item;
            });

            setProductList(list);
          }}
        />
        <CommentModal
          visible={commentModalVisible}
          onCancel={() => {
            setCommentModalVisible(false);
          }}
          handleOk={() => {
            setCommentModalVisible(false);
            // const { productId, ...rest } = value;

            // const list = productList.map((item) => {
            //   const { id, reviewCount, reviews } = item;

            //   if (productId == id) {
            //     return {
            //       ...item,
            //       reviewCount: reviewCount + 1,
            //       reviews: [rest, ...reviews],
            //     };
            //   }
            //   return item;
            // });

            // setProductList(list);
          }}
          data={record || {}}
        />
      </div>
    </>
  );
};

export default Product;
